@using Microsoft.AspNetCore.Components

<DocMatTextField></DocMatTextField>

<h5 class="mat-h5">Example</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@myStringValue" Label="Standard"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@myStringValue" Dense="true" Label="Dense"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@myStringValue" Label="Label"></MatTextField>
        </p>

        <p>
            <MatTextField @bind-Value="@myIntValue" Label="Int Field"></MatTextField>
        </p>

        <p>
            <MatTextField @bind-Value="@myDateTimeNullValue" Label="DateTime? Field"></MatTextField>
        </p>

        <p>
            <MatTextField TValue="decimal" Label="decimal Field with TValue"></MatTextField>
        </p>

        @code
        {

            string myStringValue;
            int myIntValue;
            DateTime? myDateTimeNullValue;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@myStringValue"" Label=""Standard""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@myStringValue"" Dense=""true"" Label=""Dense""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@myStringValue"" Label=""Label""></MatTextField>
        </p>

        <p>
            <MatTextField @bind-Value=""@myIntValue"" Label=""Int Field""></MatTextField>
        </p>

        <p>
            <MatTextField @bind-Value=""@myDateTimeNullValue"" Label=""DateTime? Field""></MatTextField>
        </p>

        <p>
            <MatTextField TValue=""decimal"" Label=""decimal Field with TValue""></MatTextField>
        </p>

        @code
        {

            string myStringValue;
            int myIntValue;
            DateTime? myDateTimeNullValue;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">MatStringField</h5>
<p>It is string only text field component</p>
<DemoContainer>
    <Content>
        <p>
            <MatStringField @bind-Value="@myStringValue2" Label="Standard"></MatStringField>
        </p>
        <p>
            <MatTextField @bind-Value="@myStringValue2" Dense="true" Label="Dense"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@myStringValue2" Label="Label"></MatTextField>
        </p>

        @code
        {

            string myStringValue2;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatStringField @bind-Value=""@myStringValue2"" Label=""Standard""></MatStringField>
        </p>
        <p>
            <MatTextField @bind-Value=""@myStringValue2"" Dense=""true"" Label=""Dense""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@myStringValue2"" Label=""Label""></MatTextField>
        </p>

        @code
        {

            string myStringValue2;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Helper Text</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString10" HelperText="Helper Text" Label="Label"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString10" HelperText="Helper Text Persistent" Label="Label" HelperTextPersistent="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString10" HelperText="Helper Text Validation" Label="Label" HelperTextPersistent="true" HelperTextValidation="true"></MatTextField>
        </p>

        @code
        {

            public string MyString10
            {
                get => _myString10;
                set
                {
                    _myString10 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString10;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString10"" HelperText=""Helper Text"" Label=""Label""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString10"" HelperText=""Helper Text Persistent"" Label=""Label"" HelperTextPersistent=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString10"" HelperText=""Helper Text Validation"" Label=""Label"" HelperTextPersistent=""true"" HelperTextValidation=""true""></MatTextField>
        </p>

        @code
        {

            public string MyString10
            {
                get => _myString10;
                set
                {
                    _myString10 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString10;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">
    Filled With Leading Icon
</h5>
<DemoContainer>
    <Content>

        <p>
            <MatTextField @bind-Value="@MyString2" Label="Standard" Icon="favorite"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString2" Dense="true" Label="Dense" Icon="favorite"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString2" Label="Label" Icon="favorite"></MatTextField>
        </div>

        @code
        {

            public string MyString2
            {
                get => _myString2;
                set
                {
                    _myString2 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString2;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <p>
            <MatTextField @bind-Value=""@MyString2"" Label=""Standard"" Icon=""favorite""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString2"" Dense=""true"" Label=""Dense"" Icon=""favorite""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString2"" Label=""Label"" Icon=""favorite""></MatTextField>
        </div>

        @code
        {

            public string MyString2
            {
                get => _myString2;
                set
                {
                    _myString2 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString2;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">
    Filled With Trailing Icon
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString3" Label="Standard" Icon="favorite" IconTrailing="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString3" Dense="true" Label="Dense" Icon="favorite" IconTrailing="true"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString3" Label="Label" Icon="favorite" IconTrailing="true"></MatTextField>
        </div>

        @code
        {

            public string MyString3
            {
                get => _myString3;
                set
                {
                    _myString3 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString3;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString3"" Label=""Standard"" Icon=""favorite"" IconTrailing=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString3"" Dense=""true"" Label=""Dense"" Icon=""favorite"" IconTrailing=""true""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString3"" Label=""Label"" Icon=""favorite"" IconTrailing=""true""></MatTextField>
        </div>

        @code
        {

            public string MyString3
            {
                get => _myString3;
                set
                {
                    _myString3 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString3;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">
    Outlined
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString4" Label="Standard" Outlined="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString4" Dense="true" Label="Dense" Outlined="true"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString4" Label="Label" Outlined="true"></MatTextField>
        </div>

        @code
        {

            public string MyString4
            {
                get => _myString4;
                set
                {
                    _myString4 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString4;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString4"" Label=""Standard"" Outlined=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString4"" Dense=""true"" Label=""Dense"" Outlined=""true""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString4"" Label=""Label"" Outlined=""true""></MatTextField>
        </div>

        @code
        {

            public string MyString4
            {
                get => _myString4;
                set
                {
                    _myString4 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString4;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">
    Outlined With Leading Icon
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString5" Label="Standard" Icon="favorite" Outlined="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString5" Dense="true" Label="Dense" Icon="favorite" Outlined="true"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString5" Label="Label" Icon="favorite" Outlined="true"></MatTextField>
        </div>

        @code
        {

            public string MyString5
            {
                get => _myString5;
                set
                {
                    _myString5 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString5;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString5"" Label=""Standard"" Icon=""favorite"" Outlined=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString5"" Dense=""true"" Label=""Dense"" Icon=""favorite"" Outlined=""true""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString5"" Label=""Label"" Icon=""favorite"" Outlined=""true""></MatTextField>
        </div>

        @code
        {

            public string MyString5
            {
                get => _myString5;
                set
                {
                    _myString5 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString5;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">
    Outlined With Trailing Icon
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString6" Label="Standard" Icon="favorite" IconTrailing="true" Outlined="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString6" Dense="true" Label="Dense" Icon="favorite" IconTrailing="true" Outlined="true"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString6" Label="Label" Icon="favorite" IconTrailing="true" Outlined="true"></MatTextField>
        </div>

        @code
        {

            public string MyString6
            {
                get => _myString6;
                set
                {
                    _myString6 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString6;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString6"" Label=""Standard"" Icon=""favorite"" IconTrailing=""true"" Outlined=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString6"" Dense=""true"" Label=""Dense"" Icon=""favorite"" IconTrailing=""true"" Outlined=""true""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString6"" Label=""Label"" Icon=""favorite"" IconTrailing=""true"" Outlined=""true""></MatTextField>
        </div>

        @code
        {

            public string MyString6
            {
                get => _myString6;
                set
                {
                    _myString6 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString6;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Textarea</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString7" Label="Standard" TextArea="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString7" Dense="true" Label="Dense" TextArea="true"></MatTextField>
        </p>
        <div class="text-field-container">
            <MatTextField @bind-Value="@MyString7" Label="Label" TextArea="true"></MatTextField>
        </div>

        @code
        {

            public string MyString7
            {
                get => _myString7;
                set
                {
                    _myString7 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString7;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString7"" Label=""Standard"" TextArea=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString7"" Dense=""true"" Label=""Dense"" TextArea=""true""></MatTextField>
        </p>
        <div class=""text-field-container"">
            <MatTextField @bind-Value=""@MyString7"" Label=""Label"" TextArea=""true""></MatTextField>
        </div>

        @code
        {

            public string MyString7
            {
                get => _myString7;
                set
                {
                    _myString7 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString7;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">
    Full Width
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString8" Label="Full Width" FullWidth="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString8" Dense="true" Label="Dense" FullWidth="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString8" Label="Leading Icon" Icon="mail_outline" FullWidth="true" Required="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString8" Label="Trailing Icon - Password" Icon="lock_outline" IconTrailing="true" FullWidth="true" Required="true" Type="password"></MatTextField>
        </p>
        <p>
            <MatTextField TValue="string" Placeholder="placeholder" Label="label" FullWidth="true" />
        </p>
        <p>
            <div class="text-field-container">
                <MatTextField @bind-Value="@MyString8" Label="Label" FullWidth="true"></MatTextField>
            </div>
        </p>

        @code
        {

            public string MyString8
            {
                get => _myString8;
                set
                {
                    _myString8 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString8;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString8"" Label=""Full Width"" FullWidth=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString8"" Dense=""true"" Label=""Dense"" FullWidth=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString8"" Label=""Leading Icon"" Icon=""mail_outline"" FullWidth=""true"" Required=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString8"" Label=""Trailing Icon - Password"" Icon=""lock_outline"" IconTrailing=""true"" FullWidth=""true"" Required=""true"" Type=""password""></MatTextField>
        </p>
        <p>
            <MatTextField TValue=""string"" Placeholder=""placeholder"" Label=""label"" FullWidth=""true"" />
        </p>
        <p>
            <div class=""text-field-container"">
                <MatTextField @bind-Value=""@MyString8"" Label=""Label"" FullWidth=""true""></MatTextField>
            </div>
        </p>

        @code
        {

            public string MyString8
            {
                get => _myString8;
                set
                {
                    _myString8 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString8;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">
    Full Width Textarea
</h5>
<DemoContainer>
    <Content>
        <p>
            <MatTextField @bind-Value="@MyString9" Label="Standard" TextArea="true" FullWidth="true"></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value="@MyString9" Dense="true" Label="Dense" TextArea="true" FullWidth="true"></MatTextField>
        </p>
        <p>
            <div class="text-field-container">
                <MatTextField @bind-Value="@MyString9" Label="Label" TextArea="true" FullWidth="true"></MatTextField>
            </div>
        </p>

        @code
        {

            public string MyString9
            {
                get => _myString9;
                set
                {
                    _myString9 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString9;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatTextField @bind-Value=""@MyString9"" Label=""Standard"" TextArea=""true"" FullWidth=""true""></MatTextField>
        </p>
        <p>
            <MatTextField @bind-Value=""@MyString9"" Dense=""true"" Label=""Dense"" TextArea=""true"" FullWidth=""true""></MatTextField>
        </p>
        <p>
            <div class=""text-field-container"">
                <MatTextField @bind-Value=""@MyString9"" Label=""Label"" TextArea=""true"" FullWidth=""true""></MatTextField>
            </div>
        </p>

        @code
        {

            public string MyString9
            {
                get => _myString9;
                set
                {
                    _myString9 = value;
                    this.StateHasChanged();
                }
            }

            private string _myString9;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">PlaceHolder</h5>
<DemoContainer>
    <Content>
        <MatTextField PlaceHolder="Test PlaceHolder" TValue="string"></MatTextField>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTextField PlaceHolder=""Test PlaceHolder"" TValue=""string""></MatTextField>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Required</h5>

<DemoContainer>
    <Content>
        <MatTextField Required="true" TValue="string"></MatTextField>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTextField Required=""true"" TValue=""string""></MatTextField>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Disabled and ReadOnly</h5>

<DemoContainer>
    <Content>
        <p>
            <MatStringField Disabled="true" Value="Disabled" Label="Disabled"></MatStringField>
        </p>

        <p>
            <MatStringField Disabled="true" TextArea="true" Value="Disabled TextArea" Label="Disabled TextArea"></MatStringField>
        </p>

        <p>
            <MatStringField ReadOnly="true" Value="ReadOnly" Label="ReadOnly"></MatStringField>
        </p>

        <p>
            <MatStringField ReadOnly="true" TextArea="true" Value="ReadOnly TextArea" Label="ReadOnly TextArea"></MatStringField>
        </p>
    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <p>
            <MatStringField Disabled=""true"" Value=""Disabled"" Label=""Disabled""></MatStringField>
        </p>

        <p>
            <MatStringField Disabled=""true"" TextArea=""true"" Value=""Disabled TextArea"" Label=""Disabled TextArea""></MatStringField>
        </p>

        <p>
            <MatStringField ReadOnly=""true"" Value=""ReadOnly"" Label=""ReadOnly""></MatStringField>
        </p>

        <p>
            <MatStringField ReadOnly=""true"" TextArea=""true"" Value=""ReadOnly TextArea"" Label=""ReadOnly TextArea""></MatStringField>
        </p>
    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">InputClass and InputStyle</h5>

<DemoContainer>
    <Content>

        <style>
            .demo-text-field-class {
                font-family: monospace;
                color: red !important;
            }
        </style>

        <p>
            <MatStringField Value="InputClass" Label="Label" InputClass="demo-text-field-class"></MatStringField>
        </p>

        <p>
            <MatStringField Value="InputStyle" Label="Label" InputStyle="font-family: monospace; color: green;"></MatStringField>
        </p>


    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <style>
            .demo-text-field-class {
                font-family: monospace;
                color: red !important;
            }
        </style>

        <p>
            <MatStringField Value=""InputClass"" Label=""Label"" InputClass=""demo-text-field-class""></MatStringField>
        </p>

        <p>
            <MatStringField Value=""InputStyle"" Label=""Label"" InputStyle=""font-family: monospace; color: green;""></MatStringField>
        </p>


    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>

<h5 class="mat-h5">Events</h5>

<DemoContainer>
    <Content>
        <MatTextField TValue="string" OnFocus="@OnFocusHandler" OnFocusOut="OnFocusOutHandler" OnKeyPress="@OnKeyPressHandler" OnKeyDown="@OnKeyDownHandler" OnKeyUp="@OnKeyUpHandler" OnInput="@OnInputHandler"></MatTextField>

        <div>@eventLog</div>


        @code
        {

            string eventLog = "";

            void AddLog(string line)
            {
                eventLog += "\r\n" + line;
                this.StateHasChanged();
            }

            void OnFocusHandler(FocusEventArgs e)
            {
                this.AddLog("OnFocus");
            }

            void OnFocusOutHandler(FocusEventArgs e)
            {
                this.AddLog("OnFocusOut");
            }

            void OnKeyPressHandler(KeyboardEventArgs e)
            {
                this.AddLog("OnKeyPress " + e.Key);
            }

            void OnKeyDownHandler(KeyboardEventArgs e)
            {
                this.AddLog("OnKeyDown " + e.Key);
            }

            void OnKeyUpHandler(KeyboardEventArgs e)
            {
                this.AddLog("OnKeyUp " + e.Key);
            }

            void OnInputHandler(ChangeEventArgs e)
            {
                this.AddLog("OnInput");
            }

        }


    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"
        <MatTextField TValue=""string"" OnFocus=""@OnFocusHandler"" OnFocusOut=""OnFocusOutHandler"" OnKeyPress=""@OnKeyPressHandler"" OnKeyDown=""@OnKeyDownHandler"" OnKeyUp=""@OnKeyUpHandler"" OnInput=""@OnInputHandler""></MatTextField>

        <div>@eventLog</div>


        @code
        {

            string eventLog = """";

            void AddLog(string line)
            {
                eventLog += ""\r\n"" + line;
                this.StateHasChanged();
            }

            void OnFocusHandler(FocusEventArgs e)
            {
                this.AddLog(""OnFocus"");
            }

            void OnFocusOutHandler(FocusEventArgs e)
            {
                this.AddLog(""OnFocusOut"");
            }

            void OnKeyPressHandler(KeyboardEventArgs e)
            {
                this.AddLog(""OnKeyPress "" + e.Key);
            }

            void OnKeyDownHandler(KeyboardEventArgs e)
            {
                this.AddLog(""OnKeyDown "" + e.Key);
            }

            void OnKeyUpHandler(KeyboardEventArgs e)
            {
                this.AddLog(""OnKeyUp "" + e.Key);
            }

            void OnInputHandler(ChangeEventArgs e)
            {
                this.AddLog(""OnInput"");
            }

        }


    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>


<h5 class="mat-h5">Generic Values</h5>

<DemoContainer>
    <Content>

        <p>
            <b>string</b><br />
            <MatTextField @bind-Value="@stringValue"></MatTextField> Value: @stringValue
        </p>
        <p>
            <b>sbyte</b><br />
            <MatTextField @bind-Value="@sbyteValue"></MatTextField> Value: @sbyteValue
        </p>
        <p>
            <b>sbyte?</b><br />
            <MatTextField @bind-Value="@sbyteNullValue"></MatTextField> Value: @sbyteNullValue
        </p>
        <p>
            <b>byte</b><br />
            <MatTextField @bind-Value="@byteValue"></MatTextField> Value: @byteValue
        </p>
        <p>
            <b>byte?</b><br />
            <MatTextField @bind-Value="@byteNullValue"></MatTextField> Value: @byteNullValue
        </p>
        <p>
            <b>short</b><br />
            <MatTextField @bind-Value="@shortValue"></MatTextField> Value: @shortValue
        </p>
        <p>
            <b>short?</b><br />
            <MatTextField @bind-Value="@shortNullValue"></MatTextField> Value: @shortNullValue
        </p>
        <p>
            <b>ushort</b><br />
            <MatTextField @bind-Value="@ushortValue"></MatTextField> Value: @ushortValue
        </p>
        <p>
            <b>ushort?</b><br />
            <MatTextField @bind-Value="@ushortNullValue"></MatTextField> Value: @ushortNullValue
        </p>
        <p>
            <b>int</b><br />
            <MatTextField @bind-Value="@intValue"></MatTextField> Value: @intValue
        </p>
        <p>
            <b>int?</b><br />
            <MatTextField @bind-Value="@intNullValue"></MatTextField> Value: @intNullValue
        </p>
        <p>
            <b>uint</b><br />
            <MatTextField @bind-Value="@uintValue"></MatTextField> Value: @uintValue
        </p>
        <p>
            <b>uint?</b><br />
            <MatTextField @bind-Value="@uintNullValue"></MatTextField> Value: @uintNullValue
        </p>
        <p>
            <b>long</b><br />
            <MatTextField @bind-Value="@longValue"></MatTextField> Value: @longValue
        </p>
        <p>
            <b>long?</b><br />
            <MatTextField @bind-Value="@longNullValue"></MatTextField> Value: @longNullValue
        </p>
        <p>
            <b>ulong</b><br />
            <MatTextField @bind-Value="@ulongValue"></MatTextField> Value: @ulongValue
        </p>
        <p>
            <b>ulong?</b><br />
            <MatTextField @bind-Value="@ulongNullValue"></MatTextField> Value: @ulongNullValue
        </p>
        <p>
            <b>char</b><br />
            <MatTextField @bind-Value="@charValue"></MatTextField> Value: @charValue
        </p>
        <p>
            <b>char?</b><br />
            <MatTextField @bind-Value="@charNullValue"></MatTextField> Value: @charNullValue
        </p>
        <p>
            <b>float</b><br />
            <MatTextField @bind-Value="@floatValue"></MatTextField> Value: @floatValue
        </p>
        <p>
            <b>float?</b><br />
            <MatTextField @bind-Value="@floatNullValue"></MatTextField> Value: @floatNullValue
        </p>
        <p>
            <b>double</b><br />
            <MatTextField @bind-Value="@doubleValue"></MatTextField> Value: @doubleValue
        </p>
        <p>
            <b>double?</b><br />
            <MatTextField @bind-Value="@doubleNullValue"></MatTextField> Value: @doubleNullValue
        </p>
        <p>
            <b>decimal</b><br />
            <MatTextField @bind-Value="@decimalValue"></MatTextField> Value: @decimalValue
        </p>
        <p>
            <b>decimal?</b><br />
            <MatTextField @bind-Value="@decimalNullValue"></MatTextField> Value: @decimalNullValue
        </p>
        <p>
            <b>DateTime</b><br />
            <MatTextField @bind-Value="@dateTimeValue"></MatTextField> Value: @dateTimeValue
        </p>
        <p>
            <b>DateTime?</b><br />
            <MatTextField @bind-Value="@dateTimeNullValue"></MatTextField> Value: @dateTimeNullValue
        </p>
        <p>
            <b>bool</b><br />
            <MatTextField @bind-Value="@boolValue"></MatTextField> Value: @boolValue
        </p>
        <p>
            <b>bool?</b><br />
            <MatTextField @bind-Value="@boolNullValue"></MatTextField> Value: @boolNullValue
        </p>

        @code
        {
            string stringValue;
            sbyte sbyteValue;
            sbyte? sbyteNullValue;
            byte byteValue;
            byte? byteNullValue;
            short shortValue;
            short? shortNullValue;
            ushort ushortValue;
            ushort? ushortNullValue;
            int intValue;
            int? intNullValue;
            uint uintValue;
            uint? uintNullValue;
            long longValue;
            long? longNullValue;
            ulong ulongValue;
            ulong? ulongNullValue;
            char charValue;
            char? charNullValue;
            float floatValue;
            float? floatNullValue;
            double doubleValue;
            double? doubleNullValue;
            decimal decimalValue;
            decimal? decimalNullValue;
            DateTime dateTimeValue;
            DateTime? dateTimeNullValue;
            bool boolValue;
            bool? boolNullValue;
        }

    </Content>
    <SourceContent>
    	<BlazorFiddle Template="MatBlazor" Code=@(@"

        <p>
            <b>string</b><br />
            <MatTextField @bind-Value=""@stringValue""></MatTextField> Value: @stringValue
        </p>
        <p>
            <b>sbyte</b><br />
            <MatTextField @bind-Value=""@sbyteValue""></MatTextField> Value: @sbyteValue
        </p>
        <p>
            <b>sbyte?</b><br />
            <MatTextField @bind-Value=""@sbyteNullValue""></MatTextField> Value: @sbyteNullValue
        </p>
        <p>
            <b>byte</b><br />
            <MatTextField @bind-Value=""@byteValue""></MatTextField> Value: @byteValue
        </p>
        <p>
            <b>byte?</b><br />
            <MatTextField @bind-Value=""@byteNullValue""></MatTextField> Value: @byteNullValue
        </p>
        <p>
            <b>short</b><br />
            <MatTextField @bind-Value=""@shortValue""></MatTextField> Value: @shortValue
        </p>
        <p>
            <b>short?</b><br />
            <MatTextField @bind-Value=""@shortNullValue""></MatTextField> Value: @shortNullValue
        </p>
        <p>
            <b>ushort</b><br />
            <MatTextField @bind-Value=""@ushortValue""></MatTextField> Value: @ushortValue
        </p>
        <p>
            <b>ushort?</b><br />
            <MatTextField @bind-Value=""@ushortNullValue""></MatTextField> Value: @ushortNullValue
        </p>
        <p>
            <b>int</b><br />
            <MatTextField @bind-Value=""@intValue""></MatTextField> Value: @intValue
        </p>
        <p>
            <b>int?</b><br />
            <MatTextField @bind-Value=""@intNullValue""></MatTextField> Value: @intNullValue
        </p>
        <p>
            <b>uint</b><br />
            <MatTextField @bind-Value=""@uintValue""></MatTextField> Value: @uintValue
        </p>
        <p>
            <b>uint?</b><br />
            <MatTextField @bind-Value=""@uintNullValue""></MatTextField> Value: @uintNullValue
        </p>
        <p>
            <b>long</b><br />
            <MatTextField @bind-Value=""@longValue""></MatTextField> Value: @longValue
        </p>
        <p>
            <b>long?</b><br />
            <MatTextField @bind-Value=""@longNullValue""></MatTextField> Value: @longNullValue
        </p>
        <p>
            <b>ulong</b><br />
            <MatTextField @bind-Value=""@ulongValue""></MatTextField> Value: @ulongValue
        </p>
        <p>
            <b>ulong?</b><br />
            <MatTextField @bind-Value=""@ulongNullValue""></MatTextField> Value: @ulongNullValue
        </p>
        <p>
            <b>char</b><br />
            <MatTextField @bind-Value=""@charValue""></MatTextField> Value: @charValue
        </p>
        <p>
            <b>char?</b><br />
            <MatTextField @bind-Value=""@charNullValue""></MatTextField> Value: @charNullValue
        </p>
        <p>
            <b>float</b><br />
            <MatTextField @bind-Value=""@floatValue""></MatTextField> Value: @floatValue
        </p>
        <p>
            <b>float?</b><br />
            <MatTextField @bind-Value=""@floatNullValue""></MatTextField> Value: @floatNullValue
        </p>
        <p>
            <b>double</b><br />
            <MatTextField @bind-Value=""@doubleValue""></MatTextField> Value: @doubleValue
        </p>
        <p>
            <b>double?</b><br />
            <MatTextField @bind-Value=""@doubleNullValue""></MatTextField> Value: @doubleNullValue
        </p>
        <p>
            <b>decimal</b><br />
            <MatTextField @bind-Value=""@decimalValue""></MatTextField> Value: @decimalValue
        </p>
        <p>
            <b>decimal?</b><br />
            <MatTextField @bind-Value=""@decimalNullValue""></MatTextField> Value: @decimalNullValue
        </p>
        <p>
            <b>DateTime</b><br />
            <MatTextField @bind-Value=""@dateTimeValue""></MatTextField> Value: @dateTimeValue
        </p>
        <p>
            <b>DateTime?</b><br />
            <MatTextField @bind-Value=""@dateTimeNullValue""></MatTextField> Value: @dateTimeNullValue
        </p>
        <p>
            <b>bool</b><br />
            <MatTextField @bind-Value=""@boolValue""></MatTextField> Value: @boolValue
        </p>
        <p>
            <b>bool?</b><br />
            <MatTextField @bind-Value=""@boolNullValue""></MatTextField> Value: @boolNullValue
        </p>

        @code
        {
            string stringValue;
            sbyte sbyteValue;
            sbyte? sbyteNullValue;
            byte byteValue;
            byte? byteNullValue;
            short shortValue;
            short? shortNullValue;
            ushort ushortValue;
            ushort? ushortNullValue;
            int intValue;
            int? intNullValue;
            uint uintValue;
            uint? uintNullValue;
            long longValue;
            long? longNullValue;
            ulong ulongValue;
            ulong? ulongNullValue;
            char charValue;
            char? charNullValue;
            float floatValue;
            float? floatNullValue;
            double doubleValue;
            double? doubleNullValue;
            decimal decimalValue;
            decimal? decimalNullValue;
            DateTime dateTimeValue;
            DateTime? dateTimeNullValue;
            bool boolValue;
            bool? boolNullValue;
        }

    ")></BlazorFiddle>
    </SourceContent>
</DemoContainer>